<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>组件示例</title>
  <link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="/static/include/css/style.css">
  <link href="/static/css/jquery-ui-1.10.4.min.css" rel="stylesheet"/>
  <style>
    .example-content {
      margin: 10px;
      background: #fff;
      padding: 10px;
      border-radius: 4px;
      overflow: hidden;
    }

    .exa-one {
    }

    .ui-helper-hidden-accessible {
      display: none;
    }

    .tab {
      display: flex;
      overflow: hidden;
    }

    .tab label {
      float: left;
      flex-shrink: 0;
    }

    .tab div {
      float: left;
    }
    .control-label{
      text-align: right;
    }
  </style>
</head>

<body class="gray-bg">
<div class="example-content">
  <h3>选择机构和用户</h3>
  <div>
    <p>使用方法：</p>
    <p>1、选择机构点击出现弹窗，点击节点前面的复选框选中节点本身以及子节点，点击节点本身只选中该节点。</p>
    <p>2、选择用户默认不可操作，当选了机构后才可操作，通过选择的机构请求用户列表，输入文本搜索选择用户。</p>
    <p>注：这两个组件用的接口示例，请根据自己项目需求更换接口地址、入参方式、返回数据组装。</p>
  </div>
  <form role="form" class="form-horizontal m-t">
    <div class="exa-one form-group">
      <label class="col-sm-3 control-label">选择机构：</label>
      <div class="col-sm-6">
        <!-- <a class="btn btn-success" onclick="selectDept()" >选择机构</a> -->
        <input class="form-control form-control-dept" type="text" placeholder="请选择机构" name="deptName"
               autocomplete="off" onclick="selectDept()" id="treeName">
      </div>
    </div>

    <div class="exa-one form-group">
      <label class="col-sm-3 control-label">选择用户（单选）：</label>
      <div class="col-sm-6">
        <input id="autoSelect" disabled class="form-control exa-input" placeholder="请输入搜索"/>
      </div>
    </div>

    <div class="exa-one form-group">
      <label class="col-sm-3 control-label">选择用户（多选）：</label>
      <div class="col-sm-6">
        <input id="autoSelectMu" disabled class="form-control exa-input" placeholder="请输入搜索"/>
      </div>
    </div>
  </form>

</div>
<!--	&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;-->
<div class="example-content">
  <h3>列表导入和导出</h3>
  <div>
    <h5>导入：</h5>
    <p>需要后端提供导入接口，兼容ie8</p>
    <h5>导出：</h5>
    <div class="tab">
      <label>导出1按钮：</label>
      <div>
        <p>需要后端提供导出接口，兼容ie8+、谷歌</p>
        <p></p>
      </div>
    </div>
    <div class="tab">
      <label>导出2按钮：</label>
      <div>
        <p>1、纯前端实现，兼容ie8+、谷歌</p>
        <p>2、导出的数据默认删除最后一列操作列，如需删除哪一列，向方法中传入数组，数组元素为列索引，如此例，第一列多选框不需要导出，传参如：$.table.downloadFileSelf( [1,5]
          )，导出的列表没有第一列checkbox，第五列用户状态和最后一列操作栏</p>
        <p>缺点：只可导出当前页，项目组如需要导出所有数据且兼容ie8，可提供思路：后端返回文件地址，前端拿到地址直接下载</p>
      </div>

    </div>
  </div>
  <div>
    <div class="btn-group-sm" id="toolbar" role="group">
      <a class="btn btn-info" onclick="$.table.importExcel()">
        <i class="fa fa-upload"></i> 导入
      </a>
      <a class="btn btn-warning" onclick="$.table.exportMyExcel()">
        <i class="fa fa-download"></i> 导出1
      </a>
      <a class="btn btn-warning" onclick="$.table.downloadFileSelf([1,5])">
        <i class="fa fa-download"></i> 导出2
      </a>
    </div>

    <div class="col-sm-12 select-table table-striped">
      <table id="bootstrap-table"></table>
    </div>
  </div>

</div>

<div class="example-content">
  <h3>模板渲染方式渲染select</h3>
  <div class="form-group">
    <label class="col-sm-3 control-label is-required">参数配置字典：</label>
    <div class="col-sm-9">
      <select class="form-control" name="systemFlag" id="systemFlag" field="systemFlag" required>

      </select>
    </div>
  </div>
</div>

<div class="example-content">
  <h3>选择时间</h3>
  <div class="form-group">
    <label class="col-sm-3 control-label is-required">选择时间：</label>
    <div class="col-sm-9">
      <input type="text" class="form-control time-input" id="startTime" placeholder="选择时间" name="createTimeStart" />
    </div>
  </div>
</div>

<!-- 导入区域 -->
<script id="importTpl" type="text/template">
  <form enctype="multipart/form-data" class="mt20 mb10" id="import-form">
    <div class="col-xs-offset-1">
      <input type="file" id="file" name="file"/>
      <input type="checkbox" id="submitType" name="updateSupport" hidden>
      <div class="mt10 pt5">
        <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据
        &nbsp; <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i>
        下载模板</a>
      </div>
      <font color="red" class="pull-left mt10">
        提示：仅允许导入“xls”或“xlsx”格式文件！
      </font>
    </div>
  </form>
</script>

<script src="/static/include/js/footer.js"></script>
<script src="/static/js/jquery-ui-1.10.4.min.js"></script>
<script src="/static/pages/tool/example/example.js"></script>
<script id="selectDictTpl" type="text/html">
  <option value="">所有</option>
  {{# layui.each(d.list, function(index, dict){ }}
  <option value="{{dict.value}}">{{dict.label}}</option>
  {{# }); }}
</script>
</body>

</html>